/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var websocket = null;
//var wsUri = "ws://" + document.location.host + "/endpoint";
//var websocket = new WebSocket(wsUri);
var wsUri = "ws://localhost:8080/Corsario999/endpoint";
var websocket = new WebSocket(wsUri);
var rol;
var lastPress;

var arriba = false;
var abajo = false;
var izquierda = false;
var derecha = false;
var canvas = null;//esta variable representara el canvas
var context = null;// mientras que esta representara el contexto donde dibujaremos todo.
var xBarco = 50;
var yBarco = 50;
var anguloBarco=0;
var xLancha1 =200;
var yLancha1=200;
var anguloLancha1 = 0;
var xLancha2=300;
var yLancha2 = 300;
var anguloLancha2 = 0;
var xLancha3=400;
var yLancha3 = 400;
var anguloLancha3 = 0;
var lanchaActiva = 1;
var cambioLancha = false;
var fondo = new Image();
var barco = new Image();
var lancha1 = new Image();
var lancha2 = new Image();
var lancha3 = new Image();
widthObjetosBarco= 18;
heigthObjetosBarco = 22;
widthObjetosLancha= 18;
heigthObjetosLancha = 22;
var visibleBarco   = false;
var visibleLancha1 = false;
var visibleLancha2 = false;
var visibleLancha3 = false;
var rolCliente;

function nuevaPartida(){
    sendMessage();
    document.location.href = "http://localhost:8080/Corsario777/juego.html";
    
}
function sendMessage()
{
    var json = ({});
    var json = JSON.stringify({
    "accion" : "nuevaPartida"
    });
    
    websocket.onopen = function (event) {
        websocket.send(json);
    };
}

function rol()
{
    var json = ({});
    var json = JSON.stringify({
    "accion" : "nuevaPartidaCarga"
    });
    websocket.onopen = function (event) {
        websocket.send(json);
    };
    iniciar();
}


/*Acá llegan todos los mensajes que envía el Web Socket contestando las peticiones*/
websocket.onmessage = function processMessage(evt)
{
    /*Tomo los datos del JSON recibido*/
    var jsonRecibido = JSON.parse(evt.data);
    var direccion;
    
    /*Obtengo rol y acción desde el objeto*/
    /*Con rol y acción se que se hizo y quien lo hizo*/
    
    
    rol = jsonRecibido.rol;
    var accion = jsonRecibido.accion;
    
    if(accion === "nuevaPartidaCarga"){
        rolCliente = jsonRecibido.rol;
    }
    /*Veo si la acción es un movimiento*/
    if(accion === "movimiento"){
        /*Veo si se movio el barco*/
        if(rol === "Barco"){
            /*Obtengo la velocidad con la que se mueve el barco que me la manda el servidor*/
            xBarco = jsonRecibido.x;
            yBarco = jsonRecibido.y;
            visibleLancha1 = jsonRecibido.visibleLancha1;
            visibleLancha2 = jsonRecibido.visibleLancha2;
            visibleLancha3 = jsonRecibido.visibleLancha3;
            visibleBarco   = jsonRecibido.visibleBarco;
        }
        
        /*Si se movio la lancha*/
        if(rol === "Lancha"){
            /*Obtengo la velocidad con la que se mueve el barco que me la manda el servidor*/
            
            if(lanchaActiva === 1){
                /*Sumo a las coordenadas del barco la velocidad*/
                xLancha1 = jsonRecibido.x;
                yLancha1 = jsonRecibido.y;
            }
            if(lanchaActiva === 2){
                /*Sumo a las coordenadas del barco la velocidad*/
                xLancha2 = jsonRecibido.x;
                yLancha2 = jsonRecibido.y;
            }
            if(lanchaActiva === 3){
                /*Sumo a las coordenadas del barco la velocidad*/
                xLancha3 = jsonRecibido.x;
                yLancha3 = jsonRecibido.y;
            }
            visibleLancha1 = jsonRecibido.visibleLancha1;
            visibleLancha2 = jsonRecibido.visibleLancha2;
            visibleLancha3 = jsonRecibido.visibleLancha3;
            visibleBarco   = jsonRecibido.visibleBarco;
            console.log("visible lancha 1 " + visibleLancha1);
        }
        
    }
    if(accion === "cambioLancha"){
        var activa = jsonRecibido.lanchaActiva; 
        lanchaActiva = activa;
    }
    if(accion === "rotacion"){
        if(rol === "Barco"){
            anguloBarco = jsonRecibido.angulo;
        }
        if(rol === "Lancha"){
            if(lanchaActiva === 1){
                anguloLancha1 = jsonRecibido.angulo;
            }
            if(lanchaActiva === 2){
                anguloLancha2 = jsonRecibido.angulo;
            }
            if(lanchaActiva === 3){
                anguloLancha3 = jsonRecibido.angulo;
            }
        }
    }
    
    iniciar();
}

function callkeydownhandler(evnt) {
    var ev = (evnt) ? evnt : event;
    var code=(ev.which) ? ev.which : event.keyCode;
    switch(code){
        //izquierda
        case 37:
            izquierda = true;
            break;
        //arriba
        case 38:
            arriba = true;
            break;
        //derecha
        case 39:
            derecha = true;
            break;
        //abajo
        case 40:
            abajo = true;
            break;
            
        case 67:
            if(rol === "Lancha"){
                cambioLancha = true;
                if(lanchaActiva === 1){
                    lanchaActiva = 2;
                }
                else{
                    if(lanchaActiva === 2){
                        lanchaActiva = 3;
                    }
                    else{
                        lanchaActiva = 1;
                    }
                }
                var json = ({});
                json = JSON.stringify({
                "accion"  : "cambioLancha",
                "rol"     : rol,
                "lanchaActiva"  : lanchaActiva
                });
                websocket.send(json);
            }
            break;
    }
    iniciar();
}
if (window.document.addEventListener) {
    window.document.addEventListener("keydown", callkeydownhandler, false);
} 
else {
    window.document.attachEvent("onkeydown", callkeydownhandler);
}
             
function iniciar()
{
    canvas = document.getElementById("agua");
    if (canvas.getContext)
    {
            context = canvas.getContext('2d');
           //alert("tu navegador SIIII soporta canvas");
    } 
    else 
    {
        alert("tu navegador no soporta CANVAS");
    }
    if (canvas !== null)
    {
        /*
        setInterval(ciclo, 10);
        function ciclo() 
        {*/
       
        //canvas.addEventListener("mouseup",console.log("gracias"),false);
        
        fondo.src = 'resource/ScenarioAgua.png';
        context.drawImage(fondo, 0, 0);
       
        if(rolCliente != "Lancha" || visibleBarco){
            barco.src = 'resource/barco.png';
            context.save();
            context.translate(xBarco, yBarco);
            context.rotate(anguloBarco);
            //context.drawImage(barco, canvas_x, canvas_y);
            context.drawImage(barco, -barco.width/2, -barco.height/2);
            context.restore();
        }
        

        if(rolCliente != "Barco" || visibleLancha1){
            lancha1.src='resource/lancha.png';
            context.save();
            context.translate(xLancha1, yLancha1);
            context.rotate(anguloLancha1);
            context.drawImage(lancha1, -lancha1.width/2, -lancha1.height/2);
            context.restore();
        }
        /*else{
            lancha1.hide;
        }*/
            
        
        if(rolCliente != "Barco" || visibleLancha2){
            lancha2.src='resource/lancha.png';
            context.save();
            context.translate(xLancha2, yLancha2);
            context.rotate(anguloLancha2);
            context.drawImage(lancha2, -lancha2.width/2, -lancha2.height/2);
            context.restore();
        }
        else{
            lancha2.hide;
        }
            
        
        if(rolCliente != "Barco" || visibleLancha3){
            lancha3.src='resource/lancha.png';
            context.save();
            context.translate(xLancha3, yLancha3);
            context.rotate(anguloLancha3);
            context.drawImage(lancha3, -lancha3.width/2, -lancha3.height/2);
            context.restore();
        }
        else{
            lancha3.hide;
        }
            
        
        //alert(barco.width + " " + barco.height + " " + lancha1.width + " " + lancha1.height);
        //cuando presionen la tecla (osea cuando el evento keydown se active) quiero que ejecute mi función pulsar
        //false tiene que ver con capturas por el momento no se moleste, y si lo saben pues tampoco se molesten

        if(abajo === true){
            var json = ({});
            json = JSON.stringify({
            "accion"  : "movimiento",
            "rol"     : rol,
            "direccion"     : "abajo",
            });
            //websocket.onopen = function (event) {
            websocket.send(json);
            //};

            abajo = false;
        }
        if(arriba === true){
            var json = ({});
            json = JSON.stringify({
            "accion"  : "movimiento",
            "rol"     : rol,
            "direccion"     : "arriba",
            });
            //websocket.onopen = function (event) {
            websocket.send(json);
            arriba = false;
        }
        if(izquierda === true){
            var json = ({});
            json = JSON.stringify({
            "accion"  : "rotacionIzquierda",
            "rol"     : rol
            });
            //websocket.onopen = function (event) {
            websocket.send(json);
            izquierda = false;
        }
        if(derecha === true){
            var json = ({});
            json = JSON.stringify({
            "accion"  : "rotacionDerecha",
            "rol"     : rol
            });
            //websocket.onopen = function (event) {
            websocket.send(json);
            derecha = false;
        }
    }  
}
